Webブラウザのもう一つのパーサ: Preload Scanner | PerfData

フロントエンド側のWebパフォーマンスチューニングの基本として、「処理を混ぜない」ことを念頭に置くと良いでしょう。

具体的には、HTMLパースの処理のターンに、CSSの処理やJavaScriptの処理を混ぜない事です。そうすればpreload scannerの恩恵を活用できますし、計算処理が細分化されずに済むので、一つの処理に専念できます。

- インラインでCSSやJavaScriptを書かない

- CSS Background Imageは使わない

- pictureタグを使って画像の出し分けはしない

- loading="lazy"よりdecoding="async"を使う

- JavaScriptをbodyの閉じタグ直前に書かない(ブラウザ処理にとっては壮大なちゃぶ台返しになる！)

- imgタグにwidthやheightを書かない（classで定義しpercentやvw, vhなどを使い抽象化すればCSSの処理に移動できます）

---